<template>
  <div class="big-data"
    element-loading-background="rgba(0, 0, 0, 0.3)">

    <Head @handle-click="setLoading" />
    <FlyMap></FlyMap>
  </div>
</template>

<script>
import Head from "./component/head";
import Popup from "@/components/popup/index";
import FlyMap from "@/components/map/FlyMap";
import {
  skyList,
  dBtnList,
  chartData1,
  chartData2,
  chartData3,
  chartData4List,
  earth3DBtnList,
} from "./index.js";
export default {
  name: "bigData",
  components: { Head, Popup,FlyMap },
  data() {
    return {
      pageLoading: true,
      skyList,
      dBtnList,
      chartData1,
      chartData2,
      chartData3,
      chartData4: {},
      chartData4List,
      chartData4Index: 0,
      dBtnActive: 0,
      echarts: {
        rightChartData3: null,
        rightChartData2: null,
        rightChartData4: null,
        rightChartData1: null,
        rightChartData5: null,
      },
      my3DEarthChart: null,
      earth3DBtnList,
      visible: {
        show: false,
        title: "提示",
      },
    };
  },
  mounted() {
    this.initCharts();
    this.initChartData4();
    this.initChartData5();
  },
  methods: {

    initChartData5Onresize() {
      window.onresize = () => {
        this.my3DEarthChart.resize();
      };
    },
    initChartData5() {
      setTimeout(() => {
        this.$nextTick(() => {
          let el = document.getElementById("3DEarth");
          el.style.height = this.echarts.rightChartData5;
          this.my3DEarthChart = this.$echarts.init(el);
          this.my3DEarthChart.setOption(
            {
              backgroundColor: "transparent",
              globe: {
                baseTexture: require("./images/world.jpg"),
                heightTexture: require("./images/world.jpg"),
                displacementScale: 0.04,
                shading: "realistic",
                realisticMaterial: {
                  roughness: 0.8,
                },
                postEffect: {
                  enable: true,
                  bloom: {
                    enable: true,
                    bloomIntensity: 0.3,
                  },
                },
                light: {
                  main: {
                    intensity: 5,
                    shadow: true,
                  },
                  ambientCubemap: {
                    exposure: 0.2,
                  },
                },
                globeRadius: 80,
                globeOuterRadius: 130,
                viewControl: {
                  autoRotateAfterStill: 2,
                  zoomSensitivity: 0,
                },
              },
            },
            true
          );
          setTimeout(() => {
            this.pageLoading = false;
            this.initChartData5Onresize();
          }, 1000);
        });
      }, 1500);
    },

    initChartsFun() {
      this.initRightChartData("rightChartData3");
      this.initRightChartData("rightChartData2");
      this.initRightChartData("rightChartData4");
      this.initRightChartData("rightChartData1");
      this.initRightChartData("rightChartData5");
    },
    initCharts() {
      this.initChartsFun();
      window.onresize = () => {
        this.initChartsFun();
      };
    },
    initRightChartData(echartsRef) {
      this.$nextTick(() => {
        const h = this.$refs[echartsRef].offsetHeight;
        this.$set(this.echarts, echartsRef, `${h}px`);
      });
    },
    onDBtnActiveClikc(k) {
      this.dBtnActive = k;
      this.setLoading();
    },
    onMonitorClick(k) {
      this.chartData4Index = k;
      this.initChartData4();
    },
    onEarth3DBtnListClick(row) {
      this.visible.show = true;
      this.visible.title = row.label;
    },
    setLoading() {
      this.pageLoading = true;
      setTimeout(() => {
        this.pageLoading = false;
      }, 1000);
    },
  },
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>